@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/theme/z-index';

:host.devui-popover {
  font-size: $devui-font-size;
  top: 0;
  left: 0;
  line-height: 1.5;
  border: none;
  z-index: $devui-z-index-pop-up;
  color: $devui-feedback-overlay-text;
  overflow-wrap: break-word;

  &,
  & > .arrow {
    position: absolute;
    box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow;
  }

  &,
  & > .devui-popover-content {
    border-radius: $devui-border-radius-feedback;
  }

  > .arrow {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    display: block;
    z-index: -1;
  }

  &.top > .arrow {
    margin-left: -4px;
    bottom: -4px;
  }

  &.right > .arrow {
    left: -4px;
    margin-top: -4px;
  }

  &.bottom > .arrow {
    margin-left: -4px;
    top: -4px;
  }

  &.left > .arrow {
    right: -4px;
    margin-top: -4px;
  }

  &.bias-left > .arrow {
    left: 16px;
  }

  &.bias-right > .arrow {
    right: 16px;
  }

  &.bias-top > .arrow {
    top: 13px;
  }

  &.bias-bottom > .arrow {
    bottom: 7px;
  }

  &.bias-horizontal-center > .arrow {
    left: 50%;
  }

  &.bias-vertical-center > .arrow {
    top: 50%;
  }

  &.top {
    margin-top: -7px;
  }

  &.bottom {
    margin-top: 7px;
  }

  &.left {
    margin-left: -7px;
  }

  &.right {
    margin-left: 7px;
  }
}

.devui-popover-content,
.arrow {
  background-color: $devui-feedback-overlay-bg;
}

.devui-popover-content {
  padding: 5px 14px;
}

.devui-popover-icon {
  display: block;
  position: absolute;
  left: 10px;
  top: 6px;

  svg.devui-icon {
    width: 16px;
    height: 16px;
  }
}

.devui-popover-main-content.with-icon {
  text-indent: 20px;
}

.devui-icon.devui-icon-success > g {
  & > path {
    fill: $devui-success;
  }

  & > circle,
  & > polygon {
    fill: $devui-light-text;
  }
}

.devui-icon.devui-icon-warning > g {
  & > polygon {
    fill: $devui-light-text;
  }

  & > path {
    fill: $devui-warning;
  }
}

.devui-icon.devui-icon-info > g {
  & > g {
    fill: $devui-info;
  }

  & > circle {
    fill: $devui-light-text;
  }
}

.devui-icon.devui-icon-error > g {
  & > path {
    fill: $devui-danger;
  }

  & > circle {
    fill: $devui-light-text;
  }
}
